import React, { useRef, useEffect, useMemo } from 'react';
import { connect } from 'dva';
import { Link, Route, Switch } from 'dva/router';
import { Radio, Card, Button, Tag } from 'antd';
import {
    ArrowUpOutlined,
    ArrowDownOutlined,
    DownloadOutlined,
} from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
import html2canvas from 'html2canvas';
import style from '@/pages/IndexPage.css';

let data = [];
for ( let i = 0 ; i < 30 ; i++){
    data.push({ date:i+1, beforeValue:200 + Math.round(Math.random() * 50), afterValue:180 + Math.round(Math.random() * 50), ratio:20 + Math.round(Math.random()*10) });
}
function SaveBarChart({ title, forReport, statusMaps, theme }) {
    let textColor = 'rgba(0, 0, 0, 0.85)';
    let seriesData = [], categoryData = [], beforeData=[], afterData = [], ratioData = [];
    data.forEach(i=>{
        categoryData.push(i.date);
        beforeData.push(i.beforeValue);
        afterData.push(i.afterValue);
        ratioData.push(i.ratio);
    })
   
    seriesData.push({
        type:'bar',
        name:'改善前',
        barWidth: forReport ? 6 : 14,
        itemStyle:{ color:'#165dff'},
        data:beforeData,
    });
    seriesData.push({
        type:'bar',
        name:'改善后',
        barWidth: forReport ? 6 : 14,
        itemStyle:{ color:'#8d1aed'},
        data:afterData,
    });
    seriesData.push({
        type:'line',
        name:'节能率',
        showSymbol:false,
        itemStyle:{ color:'#22c342'},
        yAxisIndex:1,
        data:ratioData
    });
  
    return (
        
            <ReactEcharts
                notMerge={true}
                style={{ height: '100%' }}
                option={{
                    title: {
                        text: title,
                        textStyle: {
                            fontSize: 14,
                        },
                        left: 20,
                        top: 10,
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter:(params)=>{
                            let str = params[0].name  + '<br/>';
                            params.forEach(item=>{
                                str += `<div>
                                    ${item.marker}
                                    <span style="color:#6e7079">${item.seriesName}</span>
                                    <span style="float:right;font-size:12px;color:#6e7079;margin-left:4px;">${ item.seriesName === '节能率' ? '%' : 'kwh' }</span>
                                    <span style="float:right;margin-left:20px;font-size:14px;color:#464646;font-weight:900;">${item.value }</span>
                                    
                                </div>`;
                            })
                            return str;
                        },
                        axisPointer:{
                            type:'line',
                            label:{
                                backgroundColor:'#fff'
                            }
                        }
                    },
                    
                    grid:{
                        top:40,
                        left:20,
                        right:40,
                        bottom: forReport ? 20 : 60,
                        containLabel: true,
                    },
                    xAxis: {
                        type:'category',
                        axisTick:{ show:false },
                        axisLine:{ show:false },
                        data:categoryData 
                    },
                    dataZoom: forReport ? null : {
                        type:'slider',                   
                        show:true,
                        bottom:20,
                        startValue:0,
                        endValue:24,
                        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                        handleSize: '80%',
                        handleStyle: {
                            color: '#fff',
                            shadowBlur: 3,
                            shadowColor: 'rgba(0, 0, 0, 0.6)',
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        },
                        
                    },  
                    yAxis:[
                        {
                            type: 'value',
                            name: 'kwh',
                            splitArea: {
                                show: false,
                            },
                            axisLine: { show: false },
                            axisTick: { show: false },
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#f0f0f0',
                                },
                            },
                            axisLabel: {
                                show: true,
                                color: 'rgba(0, 0, 0, 0.65)',
                            }
                        },
                        {
                            type:'value',
                            name:'节能率',
                            splitArea:{ show:false },
                            axisLine: { show: false },
                            axisTick: { show: false },
                            splitLine: { show: false },
                            axisLabel: {
                                show: true,
                                color: 'rgba(0, 0, 0, 0.65)',
                                formatter:'{value} %'
                            }
                        }
                    ],
                    
                    series:seriesData
                }}
            />
    );
}

export default React.memo(SaveBarChart);
